<template>
	<view class="p_bg_all">
    <!-- <view class="textarea-container">
      <textarea class="textarea" v-model="content" cols="30" rows="5" placeholder="复制粘贴文本或输入文本智能拆分姓名、电话和地址"></textarea>
      <view class="button" @click="handleIdentify">智能识别</view>
    </view> -->
		<view class="p_margin_t_32">
			<view class="form_list" @click="isAreaShow = true">
				<view class="form_label">省市区</view>
				<view class="p_font_28 p_flex_2 p_one_text p_text_r" :class="!formData.province?'p_color_b2': ''">
					{{!formData.province?'请选择': formData.province + '/' + formData.city + '/' + formData.area}}
				</view>
				<view style="width: 48rpx;"></view>
				<image src="https://dy.sykj365.com/uploads/mini/youjiantou@2x.png" class="p_img_48"></image>
			</view>
			<view class="form_list">
				<view class="form_label">详细地址</view>
				<textarea placeholder="请输入" placeholder-class="p_font_28 p_color_b2" class="p_font_28 p_flex_2"
					style="height: 106rpx;" v-model="formData.address"></textarea>
			</view>
			<view class="form_list">
				<view class="form_label">姓名</view>
				<input placeholder="请输入" placeholder-class="p_font_28 p_color_b2" class="p_font_28 p_flex_2"
					v-model="formData.name" />
			</view>
			<view class="form_list">
				<view class="form_label">手机号码</view>
				<input type="number" maxlength="11" placeholder="请输入" placeholder-class="p_font_28 p_color_b2"
					class="p_font_28 p_flex_2" v-model="formData.phone" />
			</view>
			<view class="form_list">
				<view class="form_label">设为默认</view>
				<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48" v-if="formData.default == 0"
					@click="formData.default = 1"></image>
				<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48" v-if="formData.default == 1"
					@click="formData.default = 0"></image>
			</view>
		</view>
		<view class="p_btn" @click="getSave">
			<view>保存</view>
		</view>
		<view class="p_del_btn" v-if="formData.id" @click="detelMsg = true">
			<view>删除</view>
		</view>
		<!-- 省市区 -->
		<van-popup :show="isAreaShow" position="bottom" round>
			<van-area title="选择省市区" :area-list="areaData" :value="chooseArea" @cancel="isAreaShow = false"
				@confirm="getAreaConfirm" />
		</van-popup>
		<!--  -->
		<tips messages="是否删除该地址？" confirmText="确定" cancelText="再想想" :tipsShow="detelMsg"
			@getDialogCancel="detelMsg = false" @getDialogConfirm="getDetel"></tips>
	</view>
</template>

<script>
	import areaData from '../../static/js/index.js';
	import tips from '../../components/tips.vue';

	export default {
		components: {
			tips
		},
		data() {
			return {
				areaData,
				formData: {
					name: '',
					phone: '',
					province: '',
					city: '',
					area: '',
					address: '',
					default: 0
				},
				isAreaShow: false,
				chooseArea: '',
				detelMsg: false,
				all: 0,
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: `${e.id?'编辑': '新增'}收货地址`
			});

			if (e.id) {
				this.getDetailInfo(e.id);
			}

			this.all = e.all;
		},
		methods: {
			getAreaConfirm(e) {
				let list_ = e.detail.values;
				this.formData.province = list_[0].name;
				this.formData.city = list_[1].name;
				this.formData.area = list_[2].name;
				this.isAreaShow = false;
			},
			getDetailInfo(id) {
				this.$http.post(this.$api.getAddress, {
					id
				}).then(res => {
					this.formData = {
						name: res.data.name,
						phone: res.data.phone,
						province: res.data.province,
						city: res.data.city,
						area: res.data.area,
						address: res.data.address,
						default: res.data.default,
						id: res.data.id
					}

					let county_list = areaData.county_list;
					for (let i in county_list) {
						if (county_list[i] === res.data.area) {
							this.chooseArea = i.toString();
						}
					}
				})
			},
			getSave() {
				let self = this;
				if (!this.formData.province) return getApp().getMsg('请选择省市区');
				if (!this.formData.address) return getApp().getMsg('请输入详细地址');
				if (!this.formData.name) return getApp().getMsg('请输入姓名');
				if (this.formData.phone.length !== 11) return getApp().getMsg('请输入正确手机号');

				if (this.all == 0) {
					this.formData.default = 1;
				}

				this.$http.post(this.$api.setAddress, this.formData).then(res => {
					getApp().getMsg(`${self.formData.id?'编辑': '新增'}地址成功`, 'success');
					getApp().getBack();
					uni.setStorageSync('areaDataUpdate', true);
				})
			},
			getDetel() {
				this.$http.post(this.$api.del, {
					id: this.formData.id
				}).then(res => {
					getApp().getMsg('地址已删除');
					getApp().getBack();
					uni.setStorageSync('areaDataUpdate', true);
				})
			}
		}
	}
</script>

<style lang="scss">
.textarea-container {
  background-color: #fff;
  margin-top: 32rpx;
  overflow: hidden;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  .textarea {
    width: 100%;
    font-size: 28rpx;
    line-height: 1.4;
    font-size: 28rpx;
    height: 100px;
  }
  .button {
    margin-top: 24rpx;
    height: 32px;
    line-height: 32px;
    font-size:14px;
    color: #fff;
    background-color: $uni-color-primary;
    padding: 0 20px;
    border-radius: 20px;
  }
}
</style>